<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="themes/default/song/head::head(null,null)"></div>
<!-- hack iOS CSS :active style -->
<body ontouchstart="">
<!-- Post Header -->
<style type="text/css">
    header.intro-header {
        position: relative;
        background-image: url('/hux/img/post-bg-universe.jpg');
    }
    header.intro-header .header-mask {
        width: 100%;
        height: 100%;
        position: absolute;
        background: rgba(0, 0, 0, 0.3);
    }
</style>
<header class="intro-header">
    <div class="header-mask"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <div class="tags">
                        <a class="tag" href="#" th:each="tag : ${commons.splitstr(article.tags, ',')}" th:title="${tag}" th:text="${tag}"></a>
                    </div>
                    <h1 th:text="${article.title}"></h1>
                    <span class="meta" th:text="${'Posted by 宋欣聪 on ' + commons.fmtdate(article.created)}"></span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
            <!-- Post Container -->
            <div class="col-lg-8 col-lg-offset-2  col-md-10 col-md-offset-1 post-container">
                <div class="zh post-container active" style="display: block;" th:utext="${commons.article(article.content)}">
                </div>
                <hr style="visibility: hidden;">
                <ul class="pager">
                    <li class="previous" th:if="${article.previous != null}">
                        <a th:href="@{'/song/article/' + ${article.previous.cid}}" data-toggle="tooltip" data-placement="top" th:title="${article.previous.title}">
                            Previous<br>
                            <span th:text="${article.previous.title}"></span>
                        </a>
                    </li>
                    <li class="next" th:if="${article.older != null}">
                        <a th:href="@{'/song/article/' + ${article.older.cid}}" data-toggle="tooltip" data-placement="top" th:title="${article.older.title}">
                            Next<br>
                            <span th:text="${article.older.title}"></span>
                        </a>
                    </li>
                </ul>
                <hr style="visibility: hidden;">
                <!-- disqus 评论框 start -->
                <div class="comment">
                    <div id="disqus_thread" class="disqus-thread"></div>
                </div>
                <!-- disqus 评论框 end -->
            </div>

            <!-- Side Catalog Container -->
            <div class="col-lg-2 col-lg-offset-0 visible-lg-block sidebar-container catalog-container">
                <div class="side-catalog">
                    <hr class="hidden-sm hidden-xs">
                    <h5 id="catalog">
                        <a class="catalog-toggle" href="#">CATALOG</a>
                    </h5>
                    <ul class="catalog-body">
                    </ul>
                </div>
            </div>
            <!-- Sidebar Container -->
            <div class=" col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 sidebar-container">
                <!-- Featured Tags -->
                <section>
                    <hr class="hidden-sm hidden-xs">
                    <h5 id="featured-tags"><a th:href="@{/song/archive}">FEATURED TAGS</a></h5>
                    <div class="tags">
                        <a th:each="category : ${categories}" th:title="${category.name}" th:text="${category.name}"></a>
                    </div>
                    </section>
                    <!-- Friends Blog -->
                    <hr>
                    <h5 id="friends">FRIENDS</h5>
                <ul class="list-inline">
                    <li><a href="#">朋友</a></li>
                </ul>
            </div>
        </div>
    </div>
</article>

<!-- add support for mathjax by voleking-->

<!-- disqus 公共JS代码 start (一个网页只需插入一次)评论插件 -->
<!--<script type="text/javascript">-->
    <!--/* * * CONFIGURATION VARIABLES * * */-->
    <!--var disqus_shortname = "song";-->
    <!--var disqus_identifier = "/2017/07/12/upgrading-eleme-to-pwa";-->
    <!--var disqus_url = "https://huangxuan.me/2017/07/12/upgrading-eleme-to-pwa/";-->

    <!--(function () {-->
        <!--var dsq = document.createElement('script');-->
        <!--dsq.type = 'text/javascript';-->
        <!--dsq.async = true;-->
        <!--dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';-->
        <!--(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);-->
    <!--})();-->
<!--</script>-->
<!-- disqus 公共JS代码 end -->


<!-- async load function -->
<script>
    function async(u, c) {
        var d = document, t = 'script',
            o = d.createElement(t),
            s = d.getElementsByTagName(t)[0];
        o.src = u;
        if (c) {
            o.addEventListener('load', function (e) {
                c(null, e);
            }, false);
        }
        s.parentNode.insertBefore(o, s);
    }
</script>
<!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
<script>
    async("//cdnjs.cloudflare.com/ajax/libs/anchor-js/1.1.1/anchor.min.js", function () {
        anchors.options = {
            visible: 'always',
            placement: 'right',
            icon: '#'
        };
        anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
    })
</script>
<style>
    /* place left on bigger screen */
    @media all and (min-width: 800px) {
        .anchorjs-link {
            position: absolute;
            left: -0.75em;
            font-size: 1.1em;
            margin-top: -0.1em;
        }
    }
</style>


<!-- Footer -->
<div th:replace="themes/default/song/footer::footer"></div>
<!-- Baidu Tongji -->

<!-- Side Catalog -->

<script type="text/javascript">
    function generateCatalog(selector) {

        // interop with multilangual
        if ('true' == 'true') {
            _containerSelector = 'div.post-container.active'
        } else {
            _containerSelector = 'div.post-container'
        }

        // init
        var P = $(_containerSelector), a, n, t, l, i, c;
        a = P.find('h1,h2,h3,h4,h5,h6');

        // clean
        $(selector).html('');

        // appending
        a.each(function () {
            n = $(this).prop('tagName').toLowerCase();
            // i = "#" + $(this).prop('id');
            t = $(this).text();
            i = "#" + t;
            $(this).attr("id", t);
            c = $('<a href="' + i + '" rel="nofollow">' + t + '</a>');
            l = $('<li class="' + n + '_nav"></li>').append(c);
            $(selector).append(l);
        });
        return true;
    }

    generateCatalog(".catalog-body");

    // toggle side catalog
    $(".catalog-toggle").click((function (e) {
        e.preventDefault();
        $('.side-catalog').toggleClass("fold")
    }))

    /*
     * Doc: https://github.com/davist11/jQuery-One-Page-Nav
     * Fork by Hux to support padding
     */
    async("/hux/js/jquery.nav.js", function () {
        $('.catalog-body').onePageNav({
            currentClass: "active",
            changeHash: !1,
            easing: "swing",
            filter: "",
            scrollSpeed: 700,
            scrollOffset: 0,
            scrollThreshold: .2,
            begin: null,
            end: null,
            scrollChange: null,
            padding: 80
        });
    });
</script>


<!-- Multi-Lingual -->

<!-- Handle Language Change -->
<!--<script type="text/javascript">-->
    <!--// get nodes-->
    <!--var $zh = document.querySelector(".zh");-->
    <!--// var $en = document.querySelector(".en");-->
    <!--// var $select = document.querySelector("select");-->

    <!--// bind hashchange event-->
    <!--// Changes at v1.7.2: change the language flag from hash-basing to in-memory basing-->
    <!--// due to its confliction with catalog anchors.-->
    <!--// window.addEventListener('hashchange', _render);-->

    <!--// handle render-->
    <!--function _render(_hash) {-->
        <!--// var _hash = _hash || window.location.hash;-->
        <!--// // en-->
        <!--// if (_hash == "#en") {-->
        <!--//     // $select.selectedIndex = 1;-->
        <!--//     $en.style.display = "block";-->
        <!--//     $en.classList.add("active");-->
        <!--//     $zh.style.display = "none";-->
        <!--//     $zh.classList.remove("active");-->
        <!--//     // zh by default-->
        <!--// } else {-->
            <!--// not trigger onChange, otherwise cause a loop call.-->
            <!--// $select.selectedIndex = 0;-->
            <!--$zh.style.display = "block";-->
            <!--$zh.classList.add("active");-->
            <!--// $en.style.display = "none";-->
            <!--// $en.classList.remove("active");-->
        <!--// }-->
        <!--// interop with catalog-->
        <!--if ("true") generateCatalog(".catalog-body");-->
    <!--}-->
    <!--// handle select change-->
    <!--// function onLanChange(index) {-->
    <!--//     if (index == 0) {-->
    <!--//         _hash = "#zh"-->
    <!--//     } else {-->
    <!--//         _hash = "#en"-->
    <!--//     }-->
    <!--//     _render(_hash)-->
    <!--// }-->
    <!--// init-->
    <!--_render();-->
<!--</script>-->
</body>
</html>